<template>
  <a-drawer :visible="visible" :title="isAdd ? '新增路由' : '修改路由'" width="40%" :maskClosable="false" @close="onClose">
    <a-form-model ref="infoFormModel" :model="saveObject" layout="vertical" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item label="应用 AppId" prop="appId">
            <a-input v-model="saveObject.appId" placeholder="请输入" :disabled="!isAdd" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="支付方式" prop="wayCode">
            <a-input v-model="saveObject.wayCode" placeholder="请输入" :disabled="!isAdd" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="状态" prop="state">
            <a-radio-group v-model="saveObject.state">
              <a-radio :value="1">
                启用
              </a-radio>
              <a-radio :value="0">
                停用
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="路由策略" prop="strategy">
            <a-select v-model="saveObject.strategy" default-value="fee" @change="strategyChange">
              <a-select-option value="fee">
                按费率
              </a-select-option>
              <a-select-option value="amountRange">
                按金额
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item label="备注" prop="remark">
            <a-input v-model="saveObject.remark" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">
        策略配置
      </a-divider>
      <a-row :gutter="16">
        <a-col :span="12" v-if="saveObject.strategy == 'fee'">
          <a-form-model-item label="费率选择" prop="feeSelect">
            <a-radio-group v-model="feeParam.feePriority">
              <a-radio :value="'lowest'">
                最低
              </a-radio>
              <a-radio :value="'highest'">
                最高
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="saveObject.strategy == 'amountRange'">
          <a-form-model-item label="金额区间（单位元）">
            <AmountRange ref="amountRange" :amountRanges="amountParam" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="drawer-btn-center">
      <a-button @click="onClose" icon="close" :style="{ marginRight: '8px' }">取消</a-button>
      <a-button type="primary" @click="onSubmit" icon="check">保存</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { API_URL_MCH_ROUTE, req } from '@/api/manage'
// import { AmountRange } from './AmountRange'

export default {
  name: 'RouteAddOrEdit',
  components: { AmountRange: () => import('./AmountRange') },
  props: {
    callbackFunc: { type: Function, default: () => () => ({}) }
  },

  data() {
    const usernameRule = [
      { required: true, message: '!', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          const arr = this.dataList.filter(item => item.username === value)
          if (arr.length > 1) {
            return Promise.reject()
          }
          return Promise.resolve()
        },
        message: '姓名重复！',
        trigger: 'blur'
      }
    ]
    return {
      isAdd: true, // 新增 or 修改
      visible: false, // 抽屉开关
      routeId: '', // 路由ID
      saveObject: {}, // 数据对象
      feeParam: {
        feePriority: 'lowest'
      },
      amountParam: [{
        start: 0
      }],
      rules: {
        appId: [{ required: true, message: '请输入应用号', trigger: 'blur' }],
        wayCode: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
        strategy: [{ required: true, message: '请选择路由策略', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 抽屉显示
    show(routeId) {
      this.isAdd = !routeId
      // 数据清空
      this.saveObject = {
        'state': 1,
        'strategy': 'fee'
      }
      this.amountParam = [{
        start: 0
      }]

      if (this.$refs.infoFormModel !== undefined) {
        this.$refs.infoFormModel.resetFields()
      }

      const that = this
      if (!this.isAdd) { // 修改信息 延迟展示弹层
        that.routeId = routeId
        // 拉取详情
        req.getById(API_URL_MCH_ROUTE, routeId).then(res => {
          that.saveObject = res
          if (this.saveObject.strategy === 'fee') {
            this.feeParam = JSON.parse(that.saveObject.strategyParams);
          } else {
            this.amountParam = JSON.parse(that.saveObject.strategyParams);
          }
        })

        this.visible = true
      } else {
        this.saveObject.strategy = 'fee'
        this.visible = true
      }
    },
    // 表单提交
    onSubmit() {
      const that = this
      this.$refs.infoFormModel.validate(valid => {
        if (valid) { // 验证通过
          let strategyParams = "";
          if (this.saveObject.strategy === 'fee') {
            strategyParams = JSON.stringify(this.feeParam);
          } else {
            strategyParams = JSON.stringify(this.amountParam);
          }
          that.saveObject.strategyParams = strategyParams;

          // 请求接口
          if (that.isAdd) {

            req.add(API_URL_MCH_ROUTE, that.saveObject).then(res => {
              that.$message.success('新增成功')
              that.visible = false
              that.callbackFunc() // 刷新列表
            })
          } else {
            if (that.saveObject.appSecret === '') {
              delete that.saveObject.appSecret
            }
            req.updateById(API_URL_MCH_ROUTE, that.routeId, that.saveObject).then(res => {
              that.$message.success('修改成功')
              that.visible = false
              that.callbackFunc() // 刷新列表
            })
          }
        }
      })
    },
    onClose() {
      this.visible = false
    },
    strategyChange() {

    }
  }
}
</script>

<style lang="less" scoped></style>
